<!-- 依赖注入  父子组件传参 -->
<template>
    <div>
        <h1>Provide1.vue(爷)</h1>
        <label>
            <input v-model="colorVal" value="red" name="color" type="radio">红色
        </label>
        <label>
            <input v-model="colorVal" value="aquamarine" name="color" type="radio">青色
        </label>
        <label>
            <input v-model="colorVal" value="yellow" name="color" type="radio">黄色
        </label>
        <div class="box">
        </div>
        <hr>
        <Provide2 />
    </div>
</template>

<script setup lang='ts'>
import { ref, provide } from 'vue'
import Provide2 from './Provide2.vue';

const colorVal = ref<string>('red')
provide('color', colorVal)

</script>

<style scoped lang="scss">
.box {
    height: 50px;
    width: 50px;
    border: 1px solid #ccc;
    background: v-bind(colorVal);
}
</style>
